<!-- Copyright (C)2018 NavInfo Co.,Ltd. All right reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .header {
            background: #417ab6;
            height: 40px;
            line-height: 40px;
            margin: 0 0 10px 0;
			padding: 0 0 0 10px;
			color: white;
         }
        .data-view {
            float: left;
            margin: 4px;
            padding: 0px;
            border: 0px;
            width: 49%;
            min-width:400px;
            height:300px;
        }
        .page {
        	margin-left: 15px;
    		margin-right: 15px;
        }
        .view-content{
            background: #EEEEEE;
			height: 100%;
  			min-height: 100%;
        }
        </style>
        <script src="./jquery-3.3.1.js"></script>
        <script src="./bootstrap.min.js"></script>
        <link rel="stylesheet" href="./bootstrap.css">
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="https://img.hcharts.cn/highcharts/themes/sand-signika.js"></script>
    </head>
    <body>
        <div class="header">
           NaviCore System Performance Monitor
        </div>
        <div class="page">
            <div id="platform" class="col-md-4">
                <div class="panel panel-primary">
	                <div class="panel panel-heading">
	                    <strong>Platform Info</strong>
	                </div>
	                <div class="panel panel-body">
	                <p><strong>hostname :</strong> VM-0-13-ubuntu</p>
	                <p><strong>system :</strong> Linux</p>
	                <p><strong>release :</strong> 4.4.0-91-generic</p>
	                <p><strong>distribution :</strong> Ubuntu16.04xenial</p>
	                </div>
                </div>
            </div>
            <div id="general" class="col-md-4">
                <div class="panel panel-primary">
	                <div class="panel panel-heading">
	                    <strong>General Info</strong>
	                </div>
	                <div class="panel panel-body">
	                <p><strong>CPU Model :</strong> Intel(R) Xeon(R) CPU E5-26xx v4</p>
	                <p><strong>CPU MHz :</strong> 2394.446 MHz</p>
	                <p><strong>CPU architecture :</strong> x86_64</p>
	                <p><strong>CPU(s) :</strong> 1</p>
	                <p><strong>MEM total :</strong> 1.828 GB</p>
	                </div>
                </div>
            </div>
            <div id="disk" class="col-md-4">
                <div class="panel panel-primary">
	                <div class="panel panel-heading">
	                    <strong>Disk Info</strong>
	                </div>
	                <div id="disk-body" class="panel panel-body">
	                <p>Usage of <strong>/ :</strong> 28.8% of 49.089 GB</p>
	                </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="cpu" class="data-view">
                    <div class="view-content"></div>
                </div>
                <div id="mem" class="data-view">
                    <div class="view-content"></div>
                </div>
                <div id="ioByte" class="data-view">
                    <div class="view-content"></div>
                </div>
                <div id="ioCount" class="data-view">
                    <div class="view-content"></div>
                </div>
            </div>
        </div>
    </body>
	<script>
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    function activeLastPointToolip(chart, j) {
        var points = chart.series[j].points;
        chart.tooltip.refresh(points[points.length -1]);
    }

    function generateSeries(id, content) {
        return {
            name: id,
            data: (function () {
                var data = []
                    time = (new Date()).getTime()
                    for (var i = 1-g_totalTime; i <= 0; i += 1) {
                        data.push({
                            x: time + i * g_interval,
                        });
                    }
                return data;
            }())
        }
    }

    function generateStyle(type) {
        var seriesData = []
        var srcData
        var unit = ""
        var title = ""
        var yMax = null
        if (type == 'cpu') {
            seriesData.push(generateSeries('cpu', 0))
            for (var i = 1; i <= g_cpuNumber; i++) {
                seriesData.push(generateSeries('cpu' + (i - 1), 0))
            }
            unit = '%'
            srcData = g_cpuData
            title = "CPU Utilization"
            yMax = 100
        }else if (type == 'mem') {
            seriesData.push(generateSeries('mem', 0))
            unit = '%'
            srcData = g_memData
            title = "Memory Utilization"
            yMax = 100
        }else if (type == 'ioByte') {
            unit = 'MB/s'
            seriesData.push(generateSeries('read size', 0))
            seriesData.push(generateSeries('write size', 0))
            srcData = g_ioByte
            title = "IO R/W Size(MB) Per Second"
        }else if (type == 'ioCount') {
            unit = '/s'
            seriesData.push(generateSeries('read count', 0))
            seriesData.push(generateSeries('write count', 0))
            srcData = g_ioCount
            title = "IO R/W Count Per Second"
        }
        return {
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        for(var j = 0; j < this.series.length; j++)
                        {
                            var chart = this;
                            setInterval(function (chart, index, data) {
                                var x = (new Date()).getTime()
                                var y = data[index]
                                chart.series[index].addPoint([x, y], false, true);
                                if (!document.hidden) {
                                    chart.redraw(true)
                                    activeLastPointToolip(chart, index)
                                }
                            }, g_interval, chart, j, srcData);
                        }
                    }
                }
            },
            title: {
                text: title
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                max: yMax,
                labels: {
                    format: '{value}' + unit
                },
                title: {
                    text: null
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2) + unit;
                },
            },
            legend: {
                enabled: true
            },
            series: seriesData
        }
    }

    var g_interval = 1000
    var g_totalTime = 5 * 60
    var g_hostname = window.location.hostname;
    var g_apiHost = "http://" + g_hostname + "/system_monitor/api/v1" + "/performance/real_time"

    var g_cpuData = [0]
    var g_memData = [0]
    var g_ioByte = [0]
    var g_ioCount = [0]
    var g_ioLastByte = [0]
    var g_ioLastCount = [0]
    var g_cpuNumber = 0;

    (function (H) {
        H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, point, e) {
            if (e && e.type == 'mousemove') {
                proceed.call(this, point, e);
            }
        });
    }(Highcharts))

    var g_start = true
    var g_haveBaseData = false

    var webCallback = function (body, status, jq) {
        //At first, prepare base data for io
        if (!g_haveBaseData) {
            g_ioLastByte[0] = body.system.io.readSize[0]
            g_ioLastByte[1] = body.system.io.writeSize[0]
            g_ioLastCount[0] = body.system.io.readCount[0]
            g_ioLastCount[1] = body.system.io.writeCount[0]
            g_haveBaseData = true
            startDraw()
            return;
        }

        g_cpuNumber = body.system.cpu.coreNum
        g_cpuData[0] = body.system.cpu.percent[0]
        for (var i = 1; i <= g_cpuNumber; i++) {
            g_cpuData[i] = body.system.cpu.corePercent[0][i - 1]
        }

        g_memData[0] = body.system.memory.percent[0]

        g_ioByte[0] = body.system.io.readSize[0] - g_ioLastByte[0]
        g_ioByte[1] = body.system.io.writeSize[0] - g_ioLastByte[1]
        g_ioLastByte[0] = body.system.io.readSize[0]
        g_ioLastByte[1] = body.system.io.writeSize[0]

        g_ioCount[0] = body.system.io.readCount[0] - g_ioLastCount[0]
        g_ioCount[1] = body.system.io.writeCount[0] - g_ioLastCount[1]
        g_ioLastCount[0] = body.system.io.readCount[0]
        g_ioLastCount[1] = body.system.io.writeCount[0]

        setTimeout(startDraw, g_interval);
        if (g_start) {
            g_start = false
            $('#cpu').highcharts(generateStyle('cpu'));
            $('#mem').highcharts(generateStyle('mem'));
            $('#ioByte').highcharts(generateStyle('ioByte'));
            $('#ioCount').highcharts(generateStyle('ioCount'));

            var generalString = `
                <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <strong>General Info</strong>
                </div>
                <div class="panel panel-body">
                <p><strong>CPU Model :</strong> ${body.system.cpu.model}</p>
                <p><strong>CPU MHz :</strong> ${body.system.cpu.MHz} MHz</p>
                <p><strong>CPU architecture :</strong> ${body.system.cpu.architecture}</p>
                <p><strong>CPU(s) :</strong> ${body.system.cpu.coreNum}</p>
                <p><strong>Mem total :</strong> ${body.system.memory.total} GB</p>
                </div>
                </div>
            `
            $('#general').html(generalString);

            var diskString = `
                <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <strong>Disk Info</strong>
                </div>
                <div id="disk-body" class="panel panel-body">
                </div>
                </div>
            `
            $('#disk').html(diskString)

            for (key in body.system.disk) {
                var diskPartition = `<p>Usage of <strong>${body.system.disk[key].mountPoint} :</strong> ${body.system.disk[key].percent}% of ${body.system.disk[key].total} GB</p>`
                $('#disk-body').append($(diskPartition))
            }

            var platformString = `
                <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <strong>Platform Info</strong>
                </div>
                <div class="panel panel-body">
                <p><strong>Hostname :</strong> ${body.system.platform.hostname}</p>
                <p><strong>System :</strong> ${body.system.platform.system}</p>
                <p><strong>Release :</strong> ${body.system.platform.release}</p>
                <p><strong>Distribution :</strong> ${body.system.platform.distribution}</p>
                </div>
                </div>
            `
            $('#platform').html(platformString)
        }
    }
    var startDraw = function () {
        $.ajax({
            url: g_apiHost,
            dataType: "json",
            success: webCallback,
        });
    };

    startDraw();
    </script>
</html>
